<!doctype html>
<html class="no-js fixed-layout">
<head>
	<!-- 公共head Begin -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
	<meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
	<!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<title>萌宠之家-C2B2C社会化电商平台</title>

	<!-- Set render engine for 360 browser -->
	<meta name="renderer" content="webkit">

	<!-- No Baidu Siteapp-->
	<meta http-equiv="Cache-Control" content="no-siteapp"/>

	<link rel="icon" type="image/png" href="statics/img/favicon.png">

	<!-- Add to homescreen for Chrome on Android -->
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

	<!-- Add to homescreen for Safari on iOS -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="Pet Mall"/>
	<link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

	<!-- Tile icon for Win8 (144x144 + tile color) -->
	<meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
	<meta name="msapplication-TileColor" content="#0e90d2">

	<link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
	<link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
	<!--<![endif]-->

	<script src="statics/js/plugin/jquery.cookie.js"></script>

	<!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
	<script src="statics/js/plugin/jquery.form.js"></script>

	<script src="statics/js/jquery.lSelect.js"></script>
	<script src="statics/js/plugin/jquery.metadata.js"></script>
	<script src="statics/js/product.js"></script>
	<!-- 公共head End -->
</head>
<body>
<!-- 网页头部 Begin -->
<div class="header"></div>
<!-- 网页头部 End -->
<div class="am-cf shop-main">
  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <div class="am-panel am-panel-default am-margin am-text-xs">
        <div class="am-panel-hd"><span class="am-icon-cart-plus am-icon-lg"></span> 已放入购物车的商品</div>
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
          <table id="tblCartList" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
            <thead>
              <tr>
                <th>商品</th>
			    <th>分类</th>
			    <th>卖家</th>
				<th>售价</th>
				<th>数量</th>
				<th>小计</th>
				<th>删除</th>
              </tr>
            </thead>
            <tbody class="listTable">
            </tbody>
          </table>
			<h3 id="noData" style="display: none;" class="am-text-xs am-text-center am-text-danger">购物车目前没有加入任何商品!</h3>
          </div>
          <div class="am-cf am-margin">
			  <a id="continueShopping" class="clearCartItem am-btn am-btn-primary am-btn-xs am-fl" href="index.html"><span class="am-icon-home am-icon-fw">&nbsp;</span>继续购物</a>
			  <a class="clearCartItem am-btn am-btn-default am-btn-xs am-fl" href="javascript:void(0);" onclick="clearCart()"><span class="am-icon-remove am-icon-fw">&nbsp;</span>清空购物车</a>
            <a id="orderInfoButton" class="formButton am-btn am-btn-success am-btn-xs am-fr" href="order_info.html"><span class="am-icon-toggle-right am-icon-fw">&nbsp;</span>确定订单</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    // 购物车列表
    let cartList = new Array();

    // 商品分类列表
    let categoryList = new Array();

    let jsonUser;
    let token;

    $().ready( function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        // 加载公共顶部模板
        $('.header').load('header.html');

        // 加载'商品分类'列表
        loadCategoryList();

        // 加载'购物车'列表数据
        loadCartList();

    });// $().ready();

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

	// 加载'商品分类'数据
	$.ajax({
		type: 'POST',
		url: 'http://localhost:8080/category/getAll',
		async: false,
		success: function (result) {

			// 如果返回的数据的响应码不是'成功(200)'
			if (result.code != 200) {
				Modal.alert(result.msg);
				return;
			}

			// 如果返回的数据响应码为200
			// 就进行表格数据填充
			categoryList = result.data;

		}// success();

	});// $.post();

}// loadCategoryList();

/**	加载'购物车'列表数据 **/
function loadCartList() {

	// 加载'商品列表'数据
	$.post('http://localhost:8080/cart/list', {token:token}, function (result) {

		// 如果返回的是token失效，就重新登录
		if(result.code == 419) {
            // token不存在的话，就提示登录
            $("#member-login-modal").modal();
			return;
		}// if(result.code == 419);

		// 如果返回的数据的响应码不是'成功(200)'
		if(result.code != 200) {
			Modal.alert(result.msg);
			return;
		}

		// 如果返回的数据响应码为200
		// 就进行表格数据填充
		cartList = result.data;

		// 填充表格数据
		fillCartList();

	});// $.post();

}// loadCartList();

/** 填充表格数据 **/
function fillCartList( ) {

	// 清空表格数据
	$('#tblCartList tbody').empty();

	// 隐藏显示提示
	$('#noData').hide();

	// 如果没有集合数据，就直接返回
	if( !cartList || cartList.length == 0 ){
		// 设置没有数据提示
		$('#noData').show();
		// 禁用'确认订单'按钮
		$('#orderInfoButton').attr("disabled", "disabled");
		return;
	}// if();

	// 商品总数量
	let quantityAmount = 0;
	// 商品总金额
	let priceAmount = 0;

	// 循环构造单元格数据，并进行填充
	for( let i = 0; i < cartList.length; i++ ) {

		let cart = cartList[i];

		// 商品名称
		let tdName = '<td class="productName"><a href="product_content.html?id=' + cart.productId + '&cid=' + cart.product.categoryId + '">';

		// 商品图片
		let tdImage = '<img width="90px" height="90px" style="border: 1px solid #ddd;" src="' + IMAGE_URL_CONST.PRODUCT + cart.product.mainImage + '" />&emsp;';

		// 封装商品名称
		tdName += tdImage + cart.product.name + '</a></td>';

		// 商品分类
		let tdCategory = '<td class="am-text-middle">' + getCategoryPath(cart.product.categoryId) + '</td>';

        // 卖家
        let tdSellerName = '<td class="am-text-middle"><strong class="am-text-truncate">'
            + '<a target="_blank" href="seller_item_list.html?id=' + cart.product.userId
            + '">' + cart.product.userName + '</a></strong></td>';

		// 价格
		let tdPrice = '<td class="am-text-middle">' + priceCurrencyFormat(cart.product.price) + '</td>';

		// 数量
		let tdQuantity = '<td class="am-text-middle"><span class="storeInfo">' + cart.quantity + '</span></td>';
		// 如果数量为0，说明库存不足
		if( cart.quantity == 0 ) {
            tdQuantity = '<td class="am-text-middle"><span class="storeInfo am-text-danger">[库存不足]</span></td>';
		}

		// 小计
		let subTotalPrice = cart.product.price * cart.quantity;
		let tdSubTotal = '<td class="am-text-middle"><strong class="subtotalPrice am-text-danger">' + priceCurrencyFormat(subTotalPrice)  + '</strong></td>';

		// 操作
		let tdOpt = '<td class="am-text-middle"><div class="am-btn-group am-btn-group-xs">';

		// 删除按钮
		let btnDelete = '<button type="button" class="am-btn am-btn-default am-btn-xs app-table-button-padding" onclick="deleteOne(\'' + cart.id + '\')">'
			+ '<span class="am-icon-trash-o"> 删除</span></button>';

		// 操作封装
		tdOpt += btnDelete + '</div></td>';

		// 将构造好的单元格数据，填充到表格中
		$('#tblCartList tbody').append('<tr>' + tdName + tdCategory + tdSellerName + tdPrice + tdQuantity + tdSubTotal + tdOpt + '</tr>');

		// 统计商品总件数
        quantityAmount += cart.quantity;
        // 统计商品总金额
		priceAmount += subTotalPrice;

	}// for();

	// 总计单元格
	let trTotalAmount = '<tr><td colspan="6">商品共计&nbsp;<strong class="am-text-danger">'
						+ quantityAmount + '</strong>&nbsp;件&nbsp;&nbsp;&nbsp;&nbsp;'
						+ '商品总金额：<strong class="am-text-danger">'
						+ priceCurrencyFormat(priceAmount) + '</strong></td></tr>';

    $('#tblCartList tbody').append(trTotalAmount);

    // 如果商品总金额为0元
	if( priceAmount == 0 ) {
	    // 就禁止点击'确定订单'按钮
        $('#orderInfoButton').attr("disabled", "disabled");
	}

}// fillCartList();

// 单行删除
function deleteOne( cartId ) {

	Modal.register(['confirm','alert']);
	Modal.confirm("您确定要删除吗？",{
		relatedTarget: this,
		onConfirm: function(options) {
			$.ajax({
				type: 'POST',
				url: 'http://localhost:8080/cart/delete',
				dataType: "json",
				async: false,
				data: { token: token, cartId: cartId},
				success: function( result ) {

					// 如果返回的数据的响应码不是'成功(200)'
					if (result.code != 200) {
						Modal.alert(result.msg);
						return;
					}

					// 如果返回的数据响应码为200
					Modal.alert('删除成功！');

					// 重新加载购物车列表
                    loadCartList();

				}// success: function( result );
			});
		}// onConfirm: function(options);
	});
}// deleteOne( cartId );

/** 清空购物车 **/
function clearCart() {

	Modal.register(['confirm','alert']);
	Modal.confirm("您确定要清空购物车吗？",{
		relatedTarget: this,
		onConfirm: function(options) {

            // 调用清空购物车方法
            $.ajax({
                type: "POST",
                url: PetMall.base + "/cart/clear",
                data: {
                    token: token
                },
                dataType: "json",
                success: function(result) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert('清空购物车成功！');

                    // 重新加载购物车列表
                    loadCartList();

                }// success();
            });// $.ajax();

		}// onConfirm: function(options);
	});
}// clearCart();

/** 根据商品分类id，获取商品分类路径信息 **/
function getCategoryPath( categoryId ) {

	// 分类路径
	let categoryPath = "";

	// 父分类id
	let parentCategoryId;

	// 子分类名称
	let childCategoryName;

	// 循环查找父分类id
	for( let i = 0; i < categoryList.length; i++ ) {

		let category = categoryList[i];

		// 如果当前分类的id，等于传入的分类id
		if( category.id == categoryId ){
			// 设置父分类id
			parentCategoryId = category.parentId;
			// 设置子分类名称
			childCategoryName = category.name;
			break;
		}

	}// for();

	// 循环查找父分类名称
	for( let i = 0; i < categoryList.length; i++ ) {

		let category = categoryList[i];

		// 如果当前分类的父id，等于找到的父分类id
		if( category.id == parentCategoryId ){
			// 设置当前父分类名称路径
			categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
			break;
		}

	}// for();

	return categoryPath;


}// getCategoryPath( categoryId );
</script>
</html>